require(['./config'],()=>{
    require(['template','jquery','header','footer'],(template,$,header)=>{
        class Shoppingcart{
            constructor(){
                this.render()
                this.calcTotalMoney()
                this.checksChange()
                // this.setAllCheckStatus ()
                this.buttons()
                this.allCheckBtn()
               
            }
            render(){
                // 根据localStorage的数据渲染
                const cart = localStorage.getItem('cart')
                if(cart){
                    this.cart = JSON.parse(cart)
                    
                    $('#shop-body').html(template('cartTemplate',{cart:this.cart}))
                }else{
                    // 购物车为空
                  $('#shopping-car').hide()
                  $('#cart-empty').show()    
                }
                this.setAllCheckStatus()
                
            }
            calcTotalMoney(){
            // 从0算总价
                let totalMoney = this.cart.reduce((total,shop)=>{
                    // console.log(shop);
                    if(shop.checked) total += Number(shop.price) * Number(shop.count)
                    return  total
                },0)
                // console.log(totalMoney);
                
                $('#paymoney').html(`￥${totalMoney.toFixed(2)}`)

            }
            checksChange(){
                const _this =this   
                $('.checks').on('change',function(){
                    // 获取当前数据的id,在父级的自定义属性上
                    const id =$(this).parent('li').data('id')
                    // console.log(id);
                    // 把当前数据的checked的属性修改为当前选框的状态
                    _this.cart =_this.cart.map(shop=>{
                        if(shop.id===id){
                            shop.checked=$(this).prop('checked')
                        }
                        return shop
                    })
                    // 把修改之后的cart重新存localStorage
                    localStorage.setItem('cart',JSON.stringify(_this.cart))
                    // 重新算总价
                    _this. calcTotalMoney()
                    _this.setAllCheckStatus()
                    
                }) 
            }
            allCheckBtn(){
                const _this=this
                $('.all-check').on('change',function(){
                    const allCheckStatus = $(this).prop('checked')
                    // console.log(allCheckStatus)
                    $('.checks').prop('checked',allCheckStatus)
                    $('.all-check').prop('checked',allCheckStatus)
                    _this.cart = _this.cart.map(item=>{
                        item.checked=allCheckStatus
                        return item
                    })
                    localStorage.setItem('cart',JSON.stringify(_this.cart))
                    _this.calcTotalMoney()

                })
            }
            setAllCheckStatus () {
                // 设置全选
                const isAllCheck = this.cart.every(shop => shop.checked)
                // console.log(isAllCheck);
                
                $('.all-check').prop('checked', isAllCheck)
            }
            buttons(){
                let _this = this
                // console.log(_this)
                // 清空购物车
                $('#clearBtn').on('click',function(){
                    // console.log(this);
                    if(confirm("您确定要清空购物车吗？")){
                        localStorage.removeItem("cart")
                        $('#shopping-car').hide()
                        $('#cart-empty').show()
                        header. calcCartTotal()
                    }
                })
                // 删除按钮
                $('.del p').on('click',function(){
                    // console.log(this);
                    if(confirm("您确定要删除这个商品吗？")){
                        let id = $(this).parents('li').data('id')
                        // console.log(_this.cart);
                        _this.cart = _this.cart.filter(shop=>shop.id!=id)
                        // console.log(_this.cart);
                        if(_this.cart.length===0){
                            localStorage.removeItem('cart')
                            $('#shopping-car').hide()
                            $('#cart-empty').show()
                            return
                        }
                        localStorage.setItem('cart',JSON.stringify(_this.cart))
                        $(this).parents('li').remove()
                        _this.calcPrice()
                        header. calcCartTotal()
                    }
                })
                // +按钮
                $('.add').on('click',function() {
                    $(this).prev().prev().removeClass("dis")
                    var num=Number($(this).prev().val())
                    var id=$(this).parent().parent().data("id")
                    // console.log(_this.cart);
                    
                    _this.cart.forEach(shop=>{
                        if(shop.id===id){
                            shop.count++
                        }
                    })
                    localStorage.setItem("cart",JSON.stringify(_this.cart))
                    _this.calcPrice()
                    $(this).prev().val(++num)
                    _this.addMoney($(this),num)
                    header. calcCartTotal()
                })
                // -按钮
                $('.redu').on('click',function(){
                    var num=Number($(this).next().val())
                    if(num<=1){
                        return
                    }else{
                        $(this).next().val(--num)
                        var id=$(this).parent().parent().data("id")
                        _this.cart.forEach(shop=>{
                            if(shop.id===id){
                                shop.count--
                            }
                        })
                        localStorage.setItem("cart",JSON.stringify(_this.cart))
                        _this.calcPrice()
                        _this.reduMoney($(this),num)
                        header. calcCartTotal()

                    }
                    if(num<=1){
                        $(this).addClass("dis")
                    }
                })
            }
            reduMoney(that,num){
                const smallTotal = that.parent('div').prev().html().slice(1)*num
                that.parent('div').next().html(`￥${smallTotal}`)
            }
            addMoney(that,num){
               const smallTotal = that.parent('div').prev().html().slice(1)*num
               that.parent('div').next().html(`￥${smallTotal}`)
            }
            calcPrice(){
                if(this.cart){
                    var total=this.cart.reduce((count,shop)=>{
                        return shop.checked?count+=shop.price*shop.count:count
                    },0)
                    $("#paymoney").html(`￥ ${total}`)
                }
            }
            calcCartTotal(){
                // 计算计算机总数量
                let count = 0
                let cart = localStorage.getItem('cart')
                if(cart){
                    cart = JSON.parse(cart)
                    count = cart.reduce((total,shop)=>{
                        return total + shop.count
                    },0)
                }
                $('#shopnum').html(count)
                $('#cart').html(count)
            }
        }
        new Shoppingcart()
    })
})